import React from 'react';
import { useState } from 'react';
import {View,Text,TextInput,TouchableOpacity,StyleSheet,ScrollView,Image} from 'react-native';
import '../../global';
import { FontAwesome } from '@expo/vector-icons';
import HTMLView from 'react-native-htmlview';

const Detail = ({route}) => {
    const [value,setValue] = useState('');
    const item = route.params.listcon;
    let content = item.content;
    content = content.replace(/width=\"1080\"/g, '');
    content = content.replace(/<figure data-size="normal">/g, '');
    content = content.replace(/<\/figure>/g, '');
    return (
        <ScrollView>
            <View style={styles.content1}>
                <Text numberOfLines={2} style={styles.listtitle}>{item.title}</Text>
                <View style={styles.con1}>
                    <Image style={styles.userimg} source={{uri:item.userimg}} />
                    <View style={styles.con2}>
                        <Text>{item.username}</Text>
                        <Text style={styles.timer}>{item.time}</Text>
                    </View>
                </View>
                <View style={{width:'100%',padding:changeW(25)}}>
                    <HTMLView
                    value={content}
                    style={{width:'100%'}}
                    stylesheet={styles0}
                />
               </View>
            </View>
            {/* <View style={styles.commend}>
                <View style={styles.write}>
                    <Text style={{marginLeft:changeW(20),marginTop:changeH(27),fontSize:15}}>写评论</Text>
                    <TextInput style={styles.input} placeholder='请输入' value={value} onChangeText={(text)=>{setValue(text)}}/>
                    <FontAwesome style={{marginLeft:changeW(80),marginTop:changeH(27)}} name="pencil-square-o" size={24} color="black" />
                </View>
                <View>
                    <Text style={{marginLeft:changeW(30),marginTop:changeH(20),fontSize:20,marginBottom:changeH(10)}}>评论</Text>
                    {
                        commend.map(item=>{
                            return(
                                <View style={{width:'95%',backgroundColor:'#f1f1f1',marginLeft:changeW(20),borderRadius:changeW(20),marginTop:changeH(10),marginBottom:changeH(10)}}>
                                    <View style={styles.con1}>
                                        <Image style={styles.userimg} source={{uri:item.userimg}} />
                                        <View style={styles.con2}>
                                            <Text>{item.username}</Text>
                                            <Text style={styles.timer}>{item.time}</Text>
                                        </View>
                                    </View>
                                    <Text style={styles.recon}>
                                        {item.content}
                                    </Text>
                                </View>
                            )
                        })
                    }
                </View>
            </View> */}
        </ScrollView>
    )
}

const styles0 = StyleSheet.create({
    p:{
        fontSize:changeW(22),
        lineHeight:changeH(40)
    }
})

const styles = StyleSheet.create({
    content1:{
        width:'100%',
        backgroundColor:'white',
        paddingTop:changeH(20),
        borderRadius:changeW(15)
    },
    listtitle:{
        fontSize:changeW(35),
        top:changeH(10),
        left:changeW(20)
    },
    con1:{
        marginTop:changeH(20),
        marginLeft:changeW(30),
        width:changeW(250),
        flexDirection:'row',
        justifyContent:'space-between'
    },
    con2:{
        flexDirection:'column',
        justifyContent:'space-around',
        marginLeft:changeW(20)
    },
    timer:{
        color:'#717171'
    },
    userimg:{
        width:changeW(80),
        height:changeW(80),
        borderRadius:changeW(40),
    },
    listcontent:{
        width:'95%',
        marginLeft:changeW(20),
        marginRight:changeW(20), 
        marginTop:changeH(30),
        color:'rgba(0,0,0,0.7)'
    },
    listimg:{
        width:'95%',
        height:changeH(400),
        marginLeft:changeW(20),
        marginRight:changeW(20), 
        marginBottom:changeH(30),
        borderRadius:changeW(15),
        marginTop:changeH(30)
    },
    commend:{
        width:'95%',
        backgroundColor:'white',
        marginLeft:changeW(20),
        marginRight:changeW(20),
        marginTop:changeH(30),
        borderRadius:changeW(15),
        marginBottom:changeH(30),
        paddingBottom:changeH(20)
    },
    input:{
        width:changeW(450),
        height: changeH(80),
        backgroundColor:'#f1f1f1',
        borderRadius:changeH(40),
        marginTop:changeH(10),
        marginLeft:changeW(20),
        marginBottom:changeH(10),
        paddingLeft:changeW(20)
    },
    write:{
        flexDirection:'row',
        marginTop:changeH(20)
    },
    recon:{
        marginLeft:changeW(30),
        marginTop:changeH(20),
        marginBottom:changeH(15)
    }
})

export default Detail